<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    }
   
  </style>
</head>

<body>
  <div id="app">
      <div>
        <span>姓名:</span>
        <input type="text" v-model.trim()="name"/>
      </div>
      <div>
        <span>年龄:</span>
        <input type="number" v-model="age"/>
      </div>
      <div>
        <span>性别:</span>
        <select v-model="gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button @click="btnClick()">添加/修改</button>
      </div>
      <div>
        <table border="1" cellpadding="10" cellspacing="0">
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
          <tr v-for="item,i in list">
            <td>{{i+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td>
              <button @click="del(item.id)">删除</button>
              <button @click="edit(item.id)">编辑</button>
            </td>
          </tr>
        </table>
      </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true,
        name:'',
        age:'',
        gender:'男',
        id:0,
       list:[
        {id:1,name:'小美',age:'18',gender:'女'},
        {id:2,name:'小民',age:'22',gender:'男'},
        {id:3,name:'林教授',age:'58',gender:'男'},
        {id:4,name:'轩尼诗',age:'19',gender:'女'},
        {id:5,name:'冬梅',age:'16',gender:'女'},
       ]
      },
        methods: {
            btnClick(){
                // 非空判断
                if(this.name==='' || this.age <= 0) return alert('请输入正确的信息')
                if(this.flag){
                    // 添加操作
                    this.list.push({
                        id:this.list.length+1,
                        name:this.name,
                        age:this.age,
                        gender:this.gender
                    })
                }else{
                    // 修改操作
                   console.log(this.id)
                    const obj = this.list.find(item=>item.id===this.id)
                    obj.name = this.name
                    obj.age = this.age
                    obj.gender = this.gender
                    this.flag = true
                }
                // 清空表单
                this.name = ''
                this.age = ''
            },
            // 删除操作
            del(id){
                this.list = this.list.filter(item=>item.id!==id)
            },
            // 编辑回显
            edit(id){
                this.flag = false
                // 根据id找到对应的数据
                const obj = this.list.find(item=>item.id===id)
                // 将数据赋值给表单
                this.name = obj.name
                this.age = obj.age
                this.gender=obj.gender
                this.id = obj.id
            }
        },
    })
  </script>
</body>

</html>